<script setup>
    import { reactive } from 'vue';

    let items = reactive([{id:"item1", message:"可乐"}, {id:"item2", message:"薯片"}, {id:"item3", message:"炸鸡"}])

    let data = reactive(
        [
            {name:"可乐", price:3, num:3},
            {name:"薯片", price:3, num:4},
            {name:"炸鸡", price:15, num:2}
        ]
    )
    // let head = reactive(["序号", "商品名", "价格", "数量", "操作"])
    let head = ["序号", "商品名", "价格", "数量", "操作"]

    function countPrice(){
        let count = 0
        for(let index in data) {
            count += data[index].price * data[index].num
        }
        return count
    }

    function del(index) {
        data.splice(index, 1)
    }
</script>

<template>
    <div>
        <table border="1px">
            <thead>
                <tr>
                    <td v-for="(col, index) in head" v-bind:key="index" v-text="col"></td>
                </tr>
            </thead>
            <tbody v-if="data.length > 0">
                <tr v-for="(item, index) in data" v-bind:key="index">
                    <td v-text="index + 1"></td>
                    <td v-text="item.name"></td>
                    <td v-text="item.price"></td>
                    <td v-text="item.num"></td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
            <tbody v-else>购物车空了</tbody>
        </table>
        购物车总价为：{{ countPrice() }}元



        <hr>
        <ul>
            <!-- <li v-for="(item, index) in items" v-bind:key="item.id" v-text="item.message"></li> -->
            <li v-for="(item, index) in items" v-bind:key="item.id" >
                {{index + 1}} {{ item.message }}
            </li>
        </ul>
    </div>
    
</template>
  

<style scoped>

</style>
